<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="activitysearchForm" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input v-model="activitysearchForm.courseName" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程状态">
          <el-select v-model="activitysearchForm.status" placeholder="用户状态">
            <el-option label="未开始" value="-1"></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCourseList">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="addActivity">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="height: 70vh;overflow-y: scroll;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="courseName" label="课程名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="课程价格" width="180">
        </el-table-column>
        <!-- <el-table-column prop="imgPath" label="课程图片" width="180">
          <template slot-scope="scope">
            <img class="itemImg2" :src="IMGPATH + scope.row.imgPath" alt="" />
          </template>
        </el-table-column> -->
        <el-table-column prop="status" label="课程状态">
          <template slot-scope="scope">
            <div>{{ courseTypeArr[scope.row.status] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="recFlag" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="goToDetail(scope.row.courseId)">详情</el-button>
            <el-button type="primary" @click="deleteCourse(scope.row.courseId)">删除</el-button>
            <!-- <el-upload
              style="display: inline; margin-left: 10px"
              class="avatar-uploader"
              :show-file-list="false"
              :action="BASEURL + '/course/uploadPic'"
              :data="{'courseId': scope.row.courseId}"
              :on-success="handleSu"
            > 
              <el-button type="primary">上传图片</el-button>
            </el-upload> -->
          </template>
        </el-table-column>
      </el-table>
      
    </el-card>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableSize"
      @current-change="pagechange">
    </el-pagination>
    <el-dialog title="新建课程" :visible.sync="editView">
      <el-form ref="form" class="newForm" :rules="rules" :model="courseForm" label-width="130px">
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="courseForm.courseName"></el-input>
        </el-form-item>
        <el-form-item label="教练名称"  prop="teacherName">
          <el-input v-model="courseForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍" prop="introduce">
          <el-input v-model="courseForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="课程时间"  prop="date">
          <el-date-picker
            v-model="courseForm.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程价格" prop="coursePrice">
          <el-input-number v-model="courseForm.coursePrice"></el-input-number>
        </el-form-item>
        <el-form-item label="课程图片">
          <el-upload
            v-if="!createDiaShowImg"
            style="display: inline; margin-left: 10px"
            class="avatar-uploader"
            :show-file-list="false"
            :action="BASEURL + '/activity/uploadPic'"
            :on-success="handleSu"
          > 
            <el-button type="primary">上传图片</el-button>
          </el-upload>
          <img v-else class="itemImg" :src="IMGPATH + courseForm.imgPath" alt="" />
        </el-form-item>
        <el-button @click="addNewC" type="primary">新增小节</el-button>
        
        <el-form-item v-for="(item, index) in courseForm.courseRecord" :key="index" label="小节">
          <div class="closePosition" @click="delCourseRecord(index)"><div style="cursor: pointer;">删除</div></div>
          <el-form-item label="场地id">
            <el-select v-model="item.placeId" placeholder="请选择场地">
              <el-option label="场地1" value="1"></el-option>
              <el-option label="场地2" value="2"></el-option>
              <el-option label="场地3" value="3"></el-option>
              <el-option label="场地4" value="4"></el-option>
              <el-option label="场地5" value="5"></el-option>
              <el-option label="场地6" value="6"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="课程时间">
            <el-date-picker
              v-model="item.date"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="日期">
          <el-date-picker
            v-model="item.day"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-select v-model="item.date" placeholder="请选择活动时间">
            <el-option label="08:00-09:00" value="08:00"></el-option>
            <el-option label="09:00-10:00" value="09:00"></el-option>
            <el-option label="10:00-11:00" value="10:00"></el-option>
            <el-option label="11:00-12:00" value="11:00"></el-option>
            <el-option label="12:00-13:00" value="12:00"></el-option>
            <el-option label="13:00-14:00" value="13:00"></el-option>
            <el-option label="14:00-15:00" value="14:00"></el-option>
            <el-option label="15:00-16:00" value="15:00"></el-option>
            <el-option label="16:00-17:00" value="16:00"></el-option>
            <el-option label="17:00-18:00" value="17:00"></el-option>
            <el-option label="18:00-19:00" value="18:00"></el-option>
            <el-option label="19:00-20:00" value="19:00"></el-option>
          </el-select>
          <!-- <el-time-select
            v-model="item.date"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '20:00'
            }"
            value-format="HH:mm:ss">
          </el-time-select> -->
        </el-form-item>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="课程详情" :visible.sync="showcourseDetail">
      <div class="cDetail">课程名称: {{ courseDetail.courseName }}</div>
      <div class="cDetail">创建人姓名: {{ courseDetail.createUserName }}</div>
      <div class="cDetail">教练名称: {{ courseDetail.teacherName }}</div>
      <div class="cDetail2">简介: {{ courseDetail.introduce }}</div>
      <div class="cDetail">课程价格: {{ courseDetail.price }}</div>
      <div class="cDetail">开始时间: {{ courseDetail.startTime }}</div>
      <div class="cDetail">结束时间: {{ courseDetail.endTime }}</div>
      <div class="cDetail">课程图片:</div>
      <div><img class="itemImg" :src="IMGPATH + courseDetail.imgPath" alt="" /></div>
      <el-table :data="courseDetail.sectionResList" style="width: 100%">
        <el-table-column v-for="item in columnList" :key="item.prop" :prop="item.prop" :label="item.label" :min-width="item.width">
          <template slot-scope="{row}">
            <div>{{ item.prop == 'status' ? courseTypeArr[row[item.prop]] : row[item.prop]}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import api from "../network/home";

export default {
  data() {
    return {
      activitysearchForm: {},
      tableData: [],
      editView:false,
      courseForm:{
        courseRecord: []
      },
      courseDetail: {},
      showcourseDetail: false,
      courseTypeArr:{
        '-1': '未开始',
        '1': '进行中',
        '0': '已结束',
      },
      columnList: [
        { prop: 'courseId', label: '课程id', width: 80, },
        { prop: 'placeId', label: '场地id', width: 80, },
        { prop: 'shouldCount', label: '小节序号', width: 80, },
        { prop: 'startTime', label: '开始时间', width: 180, },
        { prop: 'endTime', label: '结束时间', width: 180, },
        { prop: 'status', label: '课程状态', width: 80, }
      ],
      rules: {
        courseName: [
          { required: true, message: '课程名称不能为空', trigger: 'blur' },
        ],
        teacherName: [
          { required: true, message: '教练名称不能为空', trigger: 'blur' }
        ],
        introduce: [
          {  required: true, message: '课程介绍不能为空', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '课程时间不能为空', trigger: 'change' }
        ],
        coursePrice: [
          { required: true, message: '课程价格不能为空', trigger: 'change' }
        ],
      },
      createDiaShowImg: false,
      statusTypeArr:['未开始', '进行中', '结束'],
      tableSize:0,
      pageNum:1,
    };
  },
  computed: {},
  methods: {
    handleSu({data}){
      this.courseForm.imgPath = data
      this.$message.success('上传成功')
      this.createDiaShowImg = true
    },
    pagechange(p){
      this.pageNum = p
      this.getCourseList()
    },
    getCourseList(){
      const { courseName, status } = this.activitysearchForm;
      const params = {
        pageNum: this.pageNum,
        pageSize: 10,
        courseName,
        status
      };
      api.getCourseList(params).then((res) => {
        this.tableData = res.data.data.records;
        this.tableSize = res.data.data.total
      });
    },
    changeFlag(id){
      const params = {
        userId: id
      };
      api.changeUserStatus(params).then(() => {
       this.getCourseList()
      });
    },
    addNewC(){
        this.courseForm.courseRecord.push({})
    },
    delCourseRecord(index){
      this.courseForm.courseRecord.splice(index, 1)
    },
    resetForm(){
      this.activitysearchForm = {}
    },
    addActivity(){
      this.editView = true
      // api.addActivity()
    },
    
    onSubmit(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.courseForm.courseRecord.length) {
            this.$message.error('请新增小节');
            return 
          }
          const { courseName, imgPath, teacherName, introduce, coursePrice, date, courseRecord } = this.courseForm;
          const [startTime, endTime] = date || []
          const courseRecordFormat = courseRecord.map(item => {
            // const  [startTime, endTime] = item.date|| []
            const date = item.date
            let endTime = ''
            if(date=='08:00'){endTime = '09:00:00'}
            if(date=='09:00'){endTime = '10:00:00'}

            if(!endTime){
              endTime = Number(date.split(':')[0]) + 1 +':00:00'
            }
            return {
              startTime: item.date + ':00', endTime, placeId: item.placeId, day: item.day
            }
          })
          console.log(courseRecord);
          console.log(courseRecordFormat);
          const params = {
            startTime,
            endTime,
            imgPath,
            courseName, teacherName, introduce, coursePrice, courseRecord: courseRecordFormat
          };
          api.addCourse(params).then((res) => {
            console.log(res);
            this.editView = false
            this.getCourseList()
            this.createDiaShowImg = false
          });
        }else {
          this.$message.error('请填写完整信息');
        }
      })

    },
    cancel(){
      this.editView = false
    },
    goToDetail(id){
      console.log(id);
      api.courseDetail(id).then((res) => {
        this.showcourseDetail = true
        this.courseDetail = res.data.data || {}
      });
    },
    deleteCourse(id){
      api.deleteCourse({id}).then(() => {
       this.getCourseList()
      });
    }
  },
  mounted(){
    this.getCourseList()
  }
};
</script>

<style lang="scss" scoped>
.box-card{
  margin: 20px;
}
// .newForm{
//   position: fixed;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   z-index: 1;
//   background-color: #fff;
// }
.closePosition{
  position: absolute;
  right: 0;
  border: 1px solid;
  width: 50px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background-color: #F56C6C;
  z-index: 1;
  color: #fff;
  border-radius: 4px;
}
.cDetail{
  height: 50px;
  font-size: 20px;
  margin-left: 50px;
}
.cDetail2{
  // height: 50px;
  font-size: 20px;
  margin-left: 50px;
  margin-bottom: 20px;
}
.itemDetail{
  margin-left: 50px;
  font-size: 18px;
  border: 1px solid ;
  width: 48%;
}
.itemImg{
  margin-left: 50px;
  width: 200px;
  object-fit: cover;
  height: 200px;
}
.itemImg2 {
  width: 120px;
  height: 70px;
  object-fit: cover
}
</style>